<template>
  <div class="content">
    <div>
      <h5>ID 为{{ id }}的人员信息为：</h5>
      <p>姓名：{{ person.name }}</p>
      <p>年龄：{{ person.age }}</p>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, watch } from 'vue'

const id = inject('appId')

// 这里的默认值，能否赋值为空？
const person = ref({})
const loading = ref(false)

// 获取详情的方法
const fetchDetail = (id) => {
  console.log('新的id为----> ', id || '空')

  if (!id) return

  loading.value = true
  // 模拟异步请求
  setTimeout(() => {
    person.value = {
      name: 'xiaohong',
      age: 19
    }
    loading.value = false
  }, 600)
}

watch(
  id,
  (newVal) => {
    // 模拟api请求
    fetchDetail(newVal)
  }
  // { immediate: true }
)
</script>
